<template>
	<view class="box-single">
		<view class="head">

			<view class="image">
				<image mode="widthFix" :src="box.image"></image>
			</view>

			<view class="title">{{box.name}}</view>
		</view>

		<view class="description">
			<view class="title">
				盲盒介绍：
			</view>
			<view class="content">
				{{box.description}}
			</view>

		</view>
		<view class="box-select">
			<view class="title">
				选择盲盒
			</view>
			<view class="box-grid">
				<view class="item" :class="{'active':selected_box==goods_box.id}" @click="select_box( goods_box )"
					v-for="goods_box in box.goods">
					<image mode="widthFix" src="../../../static/image/skin/box-default.png"></image>
				</view>
			</view>

		</view>

		<view class="bottom-panel">

			<view class="button-group">
				<view class="buy" @click="buy()">立即购买 </view>
			</view>

		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {

		data() {
			return {
				box_id: 0,
				selected_box: 0,
				box: {}
			}
		},
		onLoad: function(options) {

			this.box_id = options.id;
			this.get_single();
		},

		methods: {

			buy: function() {

				if (!this.selected_box) {
					uni.showToast({
						title: '请选择盲盒',
						icon: 'error',
						duration: 800
					});
					return;
				}

				//todo 创建订单，并调起支付
				uni.navigateTo({
					url: '/sm_shop/pages/box/checkout?box_goods_id='+this.selected_box
				})

			},

			select_box: function(box) {

				this.selected_box = box.id;

			},

			get_single: function() {

				let t = this;
				var url = '&m=sm_shop_plugin_box&r=box.single';
				var data = {
					id: this.box_id
				};
				app.globalData.request(url, data, "GET", res => {

					t.box = res.data;

				});

			}

		}
	}
</script>

<style lang="less">
	@import './box.less';
</style>
